<template>
  <div class="app-container">
    <div style="margin-top: 15px;" class="app-header">
      <div class="top-input">
        <el-input placeholder="请输入内容" class="input-with-select" v-model="keyword" @keyup.enter.native="handleEnter">
          <el-button slot="append" icon="el-icon-search" @click="searchBtn"></el-button>
        </el-input>
      </div>
      <div class="header-right">
        <el-button type="primary" class="header-btn-one" @click.native="exportAdmin">导出</el-button>
        <el-button type="success" class="header-btn-two" @click.native="add">添加</el-button>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95" >
        <template slot-scope="scope">
          {{ scope.$index + (paginationIndex - 1) * 15 + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="150">
        <template slot-scope="scope">
          {{ scope.row.realname }}
        </template>
      </el-table-column>
      <el-table-column label="手机号"  align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="注册时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="服务折扣" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native="viewDetail(scope)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="300">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="success" @click="editDiscount(scope)">创建折扣</el-button>
            <el-button size="mini" type="primary" @click.native="editAdmin(scope)">修改</el-button>
            <el-button size="mini" type="info" @click.native="forbidden(scope)" ref="forbidden">{{scope.row.status_text}}</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <edit-admin ref="editAdmin" class="editAdmin" :scope="scope" @refreshList="refreshList"></edit-admin>
    <Add class="dialog" ref="Add" @refresh="refresh"></Add>
    <view-detail ref="viewDetail" :id="id"></view-detail>
    <Pagination @submit="handleSubmit" :total="total"></Pagination>
  </div>
</template>

<script>
import { getUsers } from '@/api/table'
import { exportAdmin } from '@/api/operations'
import {editAdmin, forbidden} from '@/api/user'
import Add from '@/views/client/add/add'
import { Message } from 'element-ui'
import EditAdmin from '@/views/client/editAdmin/editAdmin'
import ViewDetail from '@/views/client/viewDetail/viewDetail'
import Pagination from '@/views/pagination/pagination'
export default {
  components: {
    Add,
    ViewDetail,
    Pagination,
    EditAdmin
  },
  created() {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      page: 1,
      id: -1,
      paginationIndex: 1,
      keyword: '',
      searchList: [],
      scope: {},
      forBiddenMsg: '',
    }
  },
  created() {
      this.fetchData()
  },
  mounted() {
  },
  methods: {
    refreshList() {
      this.fetchData()
    },
    refresh() {
      this.fetchData()
    },
    exportAdmin() {
      exportAdmin()
        .then((res) => {
          let b = new Blob([res], { type: 'application/vnd.ms-excel' })
          let url = URL.createObjectURL(b)
          let link = document.createElement('a')
          link.download = '吉尼客户信息’.xlsx'
          link.href = url
          link.click()
          //兼容火狐
          let evt = document.createEvent("MouseEvents")
          evt.initEvent("click", false, false)
          link.dispatchEvent(evt)
          link.remove()
          window.URL.revokeObjectURL(url)
          // console.log(res)
        })
    },
    forbidden(scope) {
      let params = Object.assign({}, {user_id: scope.row.id})
      forbidden(params)
        .then((res) => {
          scope.row.status_text = scope.row.status_text === '启用' ? '禁用' : '启用'
          Message({
            message: res.message,
            type: 'info',
            duration: 3 * 1000
          })
        })

    },
    editAdmin(scope) {
      this.$refs.editAdmin.changeVisable()
      this.scope = scope
    },
    handleEnter() {
      this.searchBtn()
    },
    searchBtn() {
      this.list = []
      this.page = 1
      this.paginationIndex = 1
      this.total = 0
      this.fetchData()
    },
    handleSubmit(val) {
      this.paginationIndex = val
      if (this.list.length === 0) return
      this.page = val
      this.fetchData(this.page)
    },
    editDiscount(scope) {
      this.$router.push({path: 'editdiscount/' + scope.row.id})
    },
    handleElTable(scope) {
      // console.log(scope)
    },
    add() {
      this.$refs.Add.changeVisable()
    },
    viewDetail(scope) {
      this.id = scope.row.id
      this.$refs.viewDetail.changeVisable()
    },
    fetchData() {
      this.listLoading = true
      let params
      if (!this.keyword) {
        params = Object.assign({}, {page: this.page})
      } else {
        params = Object.assign({}, {page: this.page, keyword: this.keyword})
      }
      getUsers(params).then(response => {
        if (response.code === 200) {
          this.total = response.data.total
          this.list = []
          response.data.list.forEach((item) => {
            item.status_text = item.status_text === '禁用' ? '启用' : '禁用'
            // console.log(item.status_text)
          })
          this.list = response.data.list
          this.listLoading = false
          // console.log(response.data.list)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table /deep/ .cell{
  color: rgb(51, 51, 51);
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
.el-input /deep/ input{
  outline: none;
  border: none;
}
.el-table /deep/ .el-row{
  display: flex;
  justify-content: space-between;
}
.el-input /deep/ .el-input__inner{
  border-radius: 12px !important;
}
.app-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 20px;
    .top-input{
      margin-left: 20px;
      .el-input{
        width: 332px !important;
        height: 32px !important;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
      .el-button{
        margin: 0 !important;
        height: 32px;
      }
      .el-input /deep/ .el-input-group__append{
        background-color: rgb(221, 221, 221) !important;
        padding: 0;
        
      }
      .el-button /deep/ .el-icon-search{
        font-size: 25px;
        position: relative;
        top: -4px
      }
    }
    
    
  }
  .header-right{
    .header-btn-one{
      width: 87px;
      height: 30px;
      background-color: rgb(27, 166, 135);
      border-radius: 6px;
      font-size: 14px;
      padding: 0px;
      border-width: 0px;
      border-style: solid;
      text-align: center;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
    }
    .header-btn-two{
      width: 87px;
      height: 30px;
      background-color: rgb(27, 166, 135);
      border-radius: 6px;
      font-size: 14px;
      padding: 0px;
      border-width: 0px;
      border-style: solid;
      text-align: center;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
    }
  }

.el-row{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  .el-button{
    width: 70px;
    height: 34px;
    border-radius: 6px;
    font-size: 14px;
    padding: 0px;
    border-width: 0px;
    border-style: solid;
    text-align: center;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    opacity: 1;
    &:nth-child(1){
      background-color: rgb(27, 166, 135);
    }
    &:nth-child(2){
      background-color: rgb(90, 152, 222);
    }
    &:nth-child(3){
      background-color: rgb(59, 57, 78);
    }
  }
}
.el-table{
  .el-table_1_column_6{
    width: 200px;
  }
}
.pagination{
  z-index: 99;
}
</style>
